<template>
  <div>
    <el-card class="box-card"
      style="margin-top: 26px; margin-left: 14px;width: 98% ;vertical-align: middle;height:600px;">
      <div style="margin-left:14px;width: 98%;margin-bottom: 20px;">
        <el-row>
          <el-button @click="add()" style="margin-left: 16px;">新增</el-button>
          <el-button @click="edit()">编辑</el-button>
          <el-button @click="del()">删除</el-button>
          <el-button @click="status(0)">启动</el-button>
          <el-button @click="status(1)">停用</el-button>
          <el-button style="float: right;margin-right:14px;" type="primary" icon="el-icon-search"
            @click="search()">搜索</el-button>
          <el-input style="float: right; width: 200px;margin-right:20px;" v-model="ss"
            placeholder="请输入供应商编号或名称"></el-input>
        </el-row>
        <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false">
          <el-card style="height:100%" class="box-card2">
            <div style="padding:8px 0px 0px 12px;" slot="header" class="clearfix">
              <span>{{ pd }}</span>
            </div>
            <el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign">

              <el-form-item label="供应商名称">
                <el-input v-model="formLabelAlign.supplierName"></el-input>
              </el-form-item>
              <el-form-item label="供应商类型">
                <el-select v-model="formLabelAlign.supplierType" style="width: 320px;" placeholder="请选择">
                  <el-option label="设备" value="0"></el-option>
                  <el-option label="备件" value="1"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="联系人">
                <el-input v-model="formLabelAlign.supplierPerson"></el-input>
              </el-form-item>
              <el-form-item label="联系方式">
                <el-input v-model="formLabelAlign.supplierPhone"></el-input>
              </el-form-item>
              <el-form-item label="微信">
                <el-input v-model="formLabelAlign.supplierWx"></el-input>
              </el-form-item>
              <el-form-item label="开户行">
                <el-input v-model="formLabelAlign.bank"></el-input>
              </el-form-item>
              <el-form-item label="银行账户">
                <el-input v-model="formLabelAlign.bankAccount"></el-input>
              </el-form-item>
              <el-form-item label="状态" prop="resource">
                <el-radio-group v-model="formLabelAlign.supplierState">
                  <el-radio label="启用" value="0"></el-radio>
                  <el-radio label="停用" value="1"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="地址">
                <el-input v-model="formLabelAlign.address"></el-input>
              </el-form-item>
              <el-form-item label="备注" prop="desc">
                <el-input type="textarea" v-model="formLabelAlign.supplierNoet"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">立即创建</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </el-drawer>
      </div>
      <div style=" margin-left:14px;width: 98%;">
        <el-table ref="multipleTable" :data="tableData.records" tooltip-effect="dark" style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column prop="supplierId" label="序号" width="120">
          </el-table-column>
          <el-table-column prop="supplierName" label="供应商名称" width="120">
          </el-table-column>
          <el-table-column prop="code" label="供应商编码" width="120">
          </el-table-column>
          <el-table-column prop="supplierType" label="供应商类型" width="120">
          </el-table-column>
          <el-table-column prop="supplierPerson" label="联系人" width="120">
          </el-table-column>
          <el-table-column prop="supplierPhone" label="联系方式" width="120">
          </el-table-column>
          <el-table-column prop="supplierWx" label="微信" width="120">
          </el-table-column>
          <el-table-column prop="supplierState" label="状态" width="120">
          </el-table-column>
          <el-table-column prop="address" label="地址" width="120">
          </el-table-column>
        </el-table>
      </div>

      <div class="block">

        <el-pagination style="margin-left: 14px;margin-top:20px;" :total="this.tableData.total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="this.tableData.page"
          :page-sizes="[2, 4]" :page-size="this.tableData.size" layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </div>
    </el-card>

  </div>

</template>

<script>
import { addConfig, updateConfig, delConfig, statusConfig } from '@/api/set/st';
import axios from 'axios'

export default {


  mounted() {
    this.init();
  },
  methods: {
    //搜索
    search() {
      this.init();
    },
    //页数
    handleSizeChange(val) {
      this.size = val;
      this.init();
    },
    init(val) {
      axios
        .get('http://localhost:9286/supplier/list', { params: { page: this.page, size: this.size, condition: this.ss } })
        .then(res => {
          console.log(res.data);
          for (var i = 0; i < res.data.records.length; i++) {
            if (res.data.records[i].supplierState == 0) {
              res.data.records[i].supplierState = "启用"
            } else {
              res.data.records[i].supplierState = "停用"
            }
            if (res.data.records[i].supplierType == "0") {
              res.data.records[i].supplierType = "设备"
            } else {
              res.data.records[i].supplierType = "备件"
            }
          }
          this.tableData = res.data;
        })
    },
    //当前页
    handleCurrentChange(val) {
      this.page = val;
      this.init();
    },
    //切换页面
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    //一件选取
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //编辑
    edit() {
      this.pd = "编辑供应商";
      this.drawer = true
      if (this.multipleSelection.length == 1) {
        this.formLabelAlign = this.multipleSelection[0];
        console.log(this.formLabelAlign);
      } else {
        console.log("不是");
      }
    },
    //新增
    add() {
      this.pd = "新建供应商";
      this.drawer = true
      this.formLabelAlign = {
        TableName: 'device_supplier',
        supplierId: '',
        supplierName: '',
        supplierNoet: '',
        supplierPhone: '',
        supplierPerson: '',
        supplierState: '',
        supplierType: '',
        supplierWx: '',
        address: '',
        code: ''
      }
    },
    //抽屉按钮
    onSubmit() {
      var json = JSON.stringify(this.formLabelAlign);
      if (this.pd == "新建供应商") {
        addConfig(this.formLabelAlign).then(res => {
          console.log(res);
          this.drawer = false;
          this.init();
        })
      } else {
        updateConfig(this.formLabelAlign).then(res => {
          console.log(res);
          this.drawer = false;
          this.init();
        })
      }
    },
    //删除
    del() {
      delConfig(this.multipleSelection[0]).then(res => {
        console.log(res);
        this.init();
      })

    },
    //更改状态
    status(val) {
      for (var i = 0; i < this.multipleSelection.length; i++) {
        this.multipleSelection[i].supplierState = val;
        var json = JSON.stringify(this.multipleSelection[i]);
        statusConfig(json).then(res => {
          console.log(res);
          this.init();
        })
      }
    }
  },
  data() {
    return {
      TableName: "",
      ss: "",
      pd: "",
      page: 1,
      size: 4,
      formLabelAlign: {
        supplierId: '',
        supplierName: '',
        supplierNoet: '',
        supplierPhone: '',
        supplierPerson: '',
        supplierState: '',
        supplierType: '',
        supplierWx: '',
        address: '',
        code: ''
      }
      ,
      drawer: false,
      tableData: [
      ],
      multipleSelection: [],
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4
    }
  }
}
</script>